<template>
  <div id="public">
    <!--搜索-->
    <div class="search-content">
      <div>
        <el-input v-model="sendName" placeholder="请输入发送者昵称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-input v-model="receiveName" placeholder="请输入接收者昵称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-select v-model="messageType" clearable placeholder="请选择消息类型"  @change="inquiryList" >
          <el-option
            v-for="item in messageTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="dateTimeRange"
          type="datetimerange"
          range-separator="至"
          clearable
          value-format="yyyy-MM-dd HH-mm-ss"
          @change="inquiryList"
          :picker-options="pickerOptions"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
      </div>
      <div class="search-apply">
        <el-button type="warning" icon="el-icon-edit" @click="selectDelete">批量删除</el-button>
      </div>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit ref="multipleTable"  :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="100"  align="center" />
        <el-table-column label="发送者昵称" prop="fromMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.fromMember">{{scope.row.fromMember.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="接收者昵称" prop="toMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.toMember">{{scope.row.toMember.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="消息发送时间" prop="sendDate" width="170" align="center" />
        <el-table-column label="消息类型" prop="type" align="center" width="120">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.type==='text'"  type="info">文本类型</el-tag>
            <el-tag size="small" v-if="scope.row.type==='image'">图片</el-tag>
            <el-tag size="small" v-if="scope.row.type==='video'" type="warning">视频</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="消息内容" prop="content" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="dealwithView(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="dealwithDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--详情蒙层-->
    <el-dialog id="view-dialog" title="消息详情" :visible.sync="viewDialogVisible" v-if="detailData">
      <el-form label-position="right" label-width="30%" >
        <el-form-item label="文本：" v-if="detailData.type==='text'">
          <div class="text-content">{{detailData.content}}</div>
        </el-form-item>
        <el-form-item label="图片：" v-if="detailData.type==='image'">
          <img :src="detailData.httpPath" alt="图片有误"  width="400" />
        </el-form-item>
        <el-form-item label="视频：" v-if="detailData.type==='video'">
          <video :src="detailData.httpPath" controls="controls"  width="400" ></video>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--删除-->
    <el-dialog :visible.sync="delDialogVisible" width="300px" center id="del-dialog" top="20%">
      <span>您确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="delDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="delKeys">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";
  export default {
    name: "ChatRecordList",
    data(){
      return{
        // 查询
        sendName:"",
        receiveName:"",
        messageType:null,
        messageTypeList:[
          {
            value:0,
            label:'文本类型'
          },
          {
            value:1,
            label:'图片'
          },
          {
            value:2,
            label:'视频'
          }
        ],
        dateTimeRange:[],
        pickerOptions: {
              shortcuts: [
                  {
                      text: '今天',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '昨天',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24);
                          let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '前天',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24* 2);
                          let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '本月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '上月',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                          let start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 23, 59, 59);
                          end.setTime(end.getTime() - 3600 * 24 * 1000);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近一周',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近一个月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近三个月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                          picker.$emit('pick', [start, end]);
                      }
                  }
              ]
          },
        isClearable:true,
        // 列表数据
        tableData:[],
        //详情
        viewDialogVisible:false,
        detailData:{},
        // 删除
        idArr:[],
        delId:[],
        delDialogVisible:false,
        //分页
        currentPage: 1,
        pageSize:10,
        total: 0
      }
    },
    mounted() {
      this.inquiryList();
    },
    methods:{
      isNotNull(value){
        return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      inquiryList(){
        let that=this;
        that.tableData=[];
        let data={
          pageNumber:that.currentPage,
          pageSize:that.pageSize,
          filters:[]
        };
        if(that.isNotNull(that.sendName)){ //发送者昵称
          data.filters.push({
            property:"fm.name",
            value:that.sendName,
            operator: "like"
          })
        }
        if(that.isNotNull(that.receiveName)){ //接收者昵称模
          data.filters.push({
            property:"tm.name",
            value:that.receiveName,
            operator: "like"
          })
        }
        if(that.isNotNull(that.messageType)){ //消息类型
          data.filters.push({
            property:"cr.type",
            value:that.messageType,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.dateTimeRange)){ //消息发送时间范围
          data.filters.push({
            property:"cr.send_date",
            value:that.dateTimeRange[0],
            operator: "ge"
          });
          data.filters.push({
            property:"cr.send_date",
            value:that.dateTimeRange[1],
            operator: "le"
          })
        }
        request({
          method: 'post',
          url: 'admin/record/list',
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data:data
        }).then(function (res) {
          if(res.code===200){
            that.total=res.data.total;
            let arr=res.data.records;
            if(arr.length===0){
              that.tableData=[];
            }else{
              that.tableData=arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //详情
      dealwithView(index,row){
        this.detailData=row;
        this.viewDialogVisible=true;
      },
      //删除
      dealwithDelete(index, row){
        this.delDialogVisible=true;
        this.delId=[];
        this.delId.push(row.id)
      },
      handleSelectionChange(val){
        this.idArr=[];
        if(val.length>0){
          for (let i = 0; i <val.length ; i++) {
            this.idArr.push(val[i].id)
          }
        }
      },
      //批量删除
      selectDelete(){
        if(this.idArr.length===0){
          Message.warning("请先选择对应需要删除的消息列");
          return false;
        }
        this.delDialogVisible=true;
      },
      //单个删除
      delKeys(){
        if(this.delId.length>0){
          this.publicDelete(this.delId);
        }else{
          this.publicDelete(this.idArr);
        }
      },
      //公共删除
      publicDelete(arr){
        let that=this;
        that.delDialogVisible=false;
        request({
          method: 'post',
          url: 'admin/record/delete',
          data:arr,
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
        }).then(function (res) {
          if(res.code===200){
            Message.success("删除成功");
            that.idArr=[];
            that.delId=[];
            that.inquiryList();
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize=val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage=val;
        this.inquiryList();
      }
    }
  }
</script>

<style src="../../assets/css/chatRecordManagemet/publicStyle.css">

</style>
